import React, { PureComponent } from "react";

export class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      username: "",
    };
  }
  handleSubmitClick(event) {
    // 1.阻止默认行为
    event.preventDefault();
    // 2.获取到所有的表单数据，对数据进行组建
    console.log("获取表单内容",this.state.username);
  }
  handleUsernameChange(e) {
    console.log(e);
    this.setState({username:e.target.value})
  }
  render() {
    const { username } = this.state;
    return (
      <div>
        <form onSubmit={(e) => this.handleSubmitClick(e)}>
          <label htmlFor="username">
            用户：
            <input
              id="username"
              onChange={(e) => this.handleUsernameChange(e)}
              value={username}
              type="text"
              name="username"
            />
          </label>
          <label htmlFor="">
            密码：
            <input id="password" type="text" name="password" />
          </label>

          <button type="submit">提交</button>
        </form>
      </div>
    );
  }
}

export default App;
